<template>
  <el-table
    :show-overflow-tooltip="true"
    @expand-change="expandColumn"
    :data="tableData"
    :border="parentBorder"
    style="width: 100%"
    :row-key="rowKey"
    @filter-change="handleFilterChange"
    @sort-change="sortChange"
    @selection-change="handleSelectionChange"
  >
    <slot name="selection"> </slot>
    <!-- 默认插槽 -->
    <template v-for="item in tablesColumn" :key="item">
      <el-table-column
        v-if="columnTypes.includes(item.type)"
        v-bind="item"
        :label="item.label"
        :align="item.align ?? 'center'"
        :selectable="selectable"
      >
        <template #default="scope">
          <template v-if="item.type == 'expand'">
            <slot :name="item.type" v-bind="scope" />
          </template>
        </template>
      </el-table-column>

      <TableColumn v-else :column="item">
        <template v-for="slot in Object.keys($slots)" #[slot]="scope">
          <slot :name="slot" v-bind="scope" />
        </template>
      </TableColumn>
    </template>

    <slot />

    <!-- 无数据 -->
    <template #empty>
      <div class="table-empty">
        <slot name="empty">
          <img src="@/assets/images/notData.png" alt="notData" style="margin-top: 50px" />
          <div>暂无数据</div>
        </slot>
      </div>
    </template>
  </el-table>
</template>
<script setup lang="ts" name="TablePro">
import { ref } from "vue";
import TableColumn from "./TableColumn.vue";
export interface ProTableProps {
  tableData: any[]; // 表格数据  ==> 必传
  rowKey?: string;
  tablesColumn: any[]; //列配置项
  alreadyAddPrivatePoolList?: any[];
}

// column 列类型
const columnTypes: any[] = ["selection", "radio", "index", "expand", "sort"];
// console.log("object", columnTypes.includes("expand"));
const emit = defineEmits(["expand-changed", "handle-filter-change", "sort-Change", "multiple-election", "selectable"]);
const parentBorder = ref(true);
const selectable = (row: any) => {
  // console.log("555", row);
  const rowKeyOne = props.rowKey;
  // console.log('object key one', rowKeyOne);
  // props.alreadyAddPrivatePoolList.map()
  return !props.alreadyAddPrivatePoolList.includes(row[rowKeyOne]);
  // emit("selectable", row);
};
const props = withDefaults(defineProps<ProTableProps>(), {
  tableData: () => [],
  rowKey: "taskid",
  alreadyAddPrivatePoolList: () => []
});

const handleFilterChange = (filters: any) => {
  emit("handle-filter-change", filters);
};

const sortChange = (data: any) => {
  emit("sort-Change", data);
};

const expandColumn = (row: any, _expandedRows: any) => {
  emit("expand-changed", row);
};

const handleSelectionChange = (val: any[]) => {
  emit("multiple-election", val);
};
</script>
